<!-- 模板 -->
<template>
	<header class="app-header">
		<div class="app-header__left" v-show="typeof leftOptions.show === 'undefined'? true: leftOptions.show">
			<a href="javascript:;" class="app-header__left__btn"  @click="onLeftHandler">
				<i class="app-header__left__btn__icon aui-icon" :class="[leftOptions.iconClass]"></i>{{leftOptions.text || '返回'}}
			</a>
			<slot name="left"></slot>
		</div>
		<h1 class="app-header__title aui-ellipsis--1">{{title}}</h1>
		<div class="app-header__right" v-show="rightOptions.show">
			<a href="javascript:;" class="app-header__right__title">
				{{rightOptions.text}}
				<i class="app-header__right__icon aui-icon" :class="[rightOptions.iconClass]"></i>
			</a>
		</div>
	</header>
</template>

<!-- js -->
<script>
	export default{
		props: {
			leftOptions: {
				type: Object,
				default(){
					return {
						show: true,
						text: '返回',
						iconClass: 'aui-icon--back',
						preventGoBack: false
					}
				}
			},	
			rightOptions: {
				type: Object,
				default(){
					return {
						show: false,
						text: '',
						iconClass: ''
					}
				}
			},
			title: {
				type: String,
				default: ''
			},

		},
		methods: {
			onLeftHandler() {
				if(!leftOptions.preventGoBack){
					this.$emit("on-left-click");
				}else{
					window.history.back();
				}
			}
		}
	}
</script>


<!-- scss -->
<style lang="scss" scoped>
	@import "../../styles/components/xheader/index.scss";
</style>